<template>
    <div v-if="payments.length">
        <div class="payment" v-for="(item, index) in payments" :key="index"  @click="payment(item.code)">
            <img class="payment-img" :src="item.img"/>
            <div class="payment-left">
                <h3>{{ item.name }}</h3>
                <p v-if="item.code === 'balancepay'">当前余额: {{money}}</p>
                <p v-else>{{ item.memo }}</p>
            </div>
            <img class="right-img" src="../../static/image/right.png"/>
        </div>
        <!-- <div class="payment" v-for="(item, index) in payments" :key="index"  @click="pay(index,Money)" v-if = "num == 2">
            <img class="payment-img" :src="item.img"/>
            <div class="payment-left">
                <h3 v-if="index == 0">微信支付</h3>
                <h3 v-if="index == 1">支付宝支付</h3>
                <p v-if="item.code === 'balancepay'">去支付</p>
                <p v-else>去支付</p>
            </div>
            <img class="right-img" src="../../static/image/right.png"/>
        </div> -->
    </div>
</template>
 
<script>
export default {
    data(){
        return{
            num:null,
            // 钱币总价
            Money:"",
        }
    },
    props: {
        payments: {
            type: Array,
            default () {
                return []
            }
        },
        money: {
            type: String,
            default () {
                return '0'
            }
        },
        // money1,
        // Num:{
        //     type: String,
        //      default () {
        //         return '0'
        //     }
        // }
    },
    methods: {
        payment (code) {
            this.$emit('pay', code)
        },
        testPlat(val){
            var u = navigator.userAgent;
            if(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1){ //android终端
            //    window.androidStub.getGoodsLink(val)
                // return 0;
                this.num = 1
            }else if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ //ios终端
                // return 1;
                /// window.webkit.messageHandlers.getBusinessLink.postMessage(val)
                // this.num = 2
                this.num = 2
            }
        },
        pay(val,code){
            if(val == 0){
                window.webkit.messageHandlers.useWechatPay.postMessage(code)
            }
            if(val ==1 ){
                 window.webkit.messageHandlers.useAliPay.postMessage(code)
            }
        },
        getiOSOrderState(data){
            if(data == 1){
                this.$router.push("/")
            }else{
               this.$router.replace({path: '/balance'})
            }
        }
    },
    created(){
        // console.log(this.$parent.$data,2222222)
        // console.log(this.$parent.$data.money)
        this.Money = this.$parent.$data.money
        // console.log(this.Money)
        this.testPlat()
    },
    mounted(){
         window['getiOSOrderState'] = data=>{
            this.getiOSOrderState(data)
        }
    },
    watch:{
        '$parent.$data.money'(){
             this.Money = this.$parent.$data.money
            //  console.log(this.Money)
        }
    }
}
</script>

<style>
    .payment{
        background-color: #fff;
        text-align: left;
        padding: .35rem .2rem;
        position: relative;
        margin-bottom: 1px;
    }
    .payment-img{
        width: 1rem;
        height: auto;
        padding-right: .15rem;
    }
    .payment-left{
        display: inline-block;
        padding-left: .2rem;
        border-left: 1px solid #F2F2F2;
    }
    .payment-left h3{
        margin-bottom: .15rem;
        font-size: .28rem;
    }
    .payment .right-img{
        right: .2rem;
    }
</style>
